<template>
	<view class="myAttendContainer">
		<AttendCalendar :open='false' />
		<view class="calendarList">
			<view class="dayItem" v-for="(item,index) in signLog" :key="index">
				<view class="day">
					{{item.time}}
				</view>
				<view class="dayInfo" v-if="item.signType == 1">
					<view class="signType">
						{{item.signType == 1 ? '常白班两卡' :''}}

					</view>
					<view class="signTimeRange">
						{{item.range}}
					</view>
					<view class="workTime">
						{{item.workTime}}
					</view>

				</view>
				<view class="dayInfo" v-else>
					<image src="/static/images/rest.png" style="width:32px;height:32px;" mode=""></image>
					<text class="restDay">休息班</text>
				</view>

			</view>


		</view>

	</view>
</template>

<script>
	import AttendCalendar from '@/components/attend-calendar/attend-calendar.vue'
	export default {
		components: {
			AttendCalendar
		},
		data() {
			return {
				signLog: [],
			};
		},
		onShow() {
			this.getList();
		},
		methods: {
			getList() {
				const list = []
				for (var i = 1; i < 31; i++) {
					list.push({
						signType: i> 10 ? 1 : 2,
						time: `2024-06-${i}`,
						range: '9:00-18:00',
						workTime: '8h'
					})
				}
				this.signLog = list
			}
		}
	}
</script>

<style lang="scss">
	
	.myAttendContainer{
		.calendarList{
			padding: 16px;
			.dayItem{
				padding: 16px;
				
				.dayInfo{
					display: flex;
					align-items: center;
					justify-content: center;
					margin-top: 10px;
					.signTimeRange{
						flex: 1;
						margin-left: 24px;
					}
				}
				
				
				.restDay {
					color: #bfbfbf;
					margin-left: 8px;
				}
			}
			
			.dayItem + .dayItem{
				border-top: 1px solid #eee;
			}
		}
		
	}

</style>